<div class="panel panel-default">
  <div
    class="panel-heading clickable"
    data-toggle="collapse"
    data-parent="#J_SettingAccordion"
    data-target="#J_Setting_Basic"
  >
    <h4 class="panel-title">{{Kooboo.text.component.pageEditor.basic}}</h4>
  </div>
  <div id="J_Setting_Basic" class="panel-collapse collapse in">
    <div class="panel-body">
      <div
        v-for="(title,index) in multiContentTitle"
        :key="index"
        v-kb-collapsein="title.show"
        class="form-group"
      >
        <label class="control-label">
          <span>{{Kooboo.text.component.pageEditor.contentTitle}}</span>
          <template v-if="!title.isDefault">
            {{title.name}}
          </template>
        </label>
        <input type="text" class="form-control" v-model="title.value" />
        <div
          class="btn-group margin-top-10"
          v-for="($data,i) in metaBindingHelpers"
          :key="i"
        >
          <a
            class="btn btn-xs btn-default"
            href="#"
            @click="metaHelp(title,$data)"
            >{{$data}}</a
          >
        </div>
        <span v-if="!title.isDefault" class="help-block"
          >{{Kooboo.text.component.pageEditor.basicHelper}}</span
        >
      </div>

      <div
        class="form-group"
        :class="{'has-error':urlPathError}"
        id="url-route-container"
      >
        <label class="control-label">
          <span>{{Kooboo.text.component.pageEditor.URL}}</span>
          <span id="url-path-error-container"></span>
        </label>
        <input
          type="text"
          v-kb-tooltip:top.manual.error="urlPathError"
          data-container="#url-route-container"
          class="form-control"
          id="url-route-input"
          v-model="urlPath"
          @input="urlInput"
        />
        <div v-if="routeHelpers.length" class="btn-group margin-top-10">
          <a
            v-for="($data,index) in routeHelpers"
            :key="index"
            class="btn btn-xs btn-default"
            @click.prevent="routeHelp($data)"
            href="#"
            >{{$data}}</a
          >
        </div>
        <p class="help-block">{{Kooboo.text.component.pageEditor.urlHelper}}</p>
      </div>
    </div>
  </div>
</div>
